<template>
  <div class="addmoney">
    <div class="header-warpper">
      <p @click="$router.back(-1)">
        <img src="../../assets/l_jt.png" alt />
        <span>提币</span>
      </p>
      <p @click="$router.push('upmoney')" class="ddxx_rt">提币记录</p>
    </div>
    <div style="height: 1rem;"></div>

    <div class="tb">
      <p class="tb01">提币</p>

      <div class="tb02">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in moneyarr"
            :key="item.value"
            :label="item.name"
            :value="item.values"
          ></el-option>
        </el-select>
      </div>
    </div>

    <div class="tbdz">
      <p class="tbdz01">提币地址</p>
      <div class="tbdz02">
        <div class="tbdz02_lt">
          <input type="text" v-model="address" name="userName" autocomplete="off" placeholder="输入或长按粘贴地址" class="inp" />
        </div>
      </div>
    </div>

    <div class="tbdz">
      <p class="tbdz01">交易密码</p>
      <div class="tbdz02">
        <div class="tbdz02_lt">
          <input type="password" autocomplete="new-password" name="password" v-model="dealpassword" placeholder="请输入交易密码" class="inp" />
        </div>
      </div>
    </div>

    <div class="tbdz">
      <p class="tbdz01">数量</p>
      <div class="tbdz02">
        <div class="tbdz02_lt">
          <input
            type="number"
            v-model="number"
            name="num"
            id="mix"
            autocomplete="off"
            :placeholder="'最小提币数量'+peis.min"
            class="num"
          />
        </div>
        <div class="tbdz02_rt">
          <div class="tbdz02_rt_z">
            <p>USDT</p>
          </div>
          <div class="tbdz02_rt_y">
            <p class="all" @click="alll">全部</p>
          </div>
        </div>
      </div>
      <p class="tbdz03">可用{{peismax}} USDT</p>
    </div>

    <div class="tbdz">
      <p class="tbdz01">手续费</p>
      <div class="tbdz02">
        <div class="tbdz02_lt">
          <p id="fee">{{peis.fee}}</p>
        </div>
        <div class="tbdz02_rt">
          <div class="tbdz02_rt_y">
            <p>USDT</p>
          </div>
        </div>
      </div>
    </div>

    <div class="dzsl">
      <p class="dzsl_lt">到账数量</p>
      <p class="dzsl_rt">{{account}}USDT</p>
    </div>

    <div class="tban">
      <input type="submit" @click="pushs" value="提币" />
    </div>

    <div class="wxts">
      <p class="wxts01">温馨提示:</p>
      <p class="wxts02">备注和地址必须填写，否则无法转账，甚至造成损失。</p>
      <p
        class="wxts02"
      >为保障资金安全，当您账户安全策略变更，密码修改，使用新地址提币。我们会对你提币进行人工审核，请耐心等待工作人员电话或邮件联系。请务必确认电脑及浏览器安全，防止信息被篡改或泄漏。</p>
    </div>
  </div>
</template>

<script>
import { setTimeout, setInterval } from "timers";
export default {
  data() {
    return {
      peis: {},
      moneyarr: [],
      value: "",
      number: "",
      address: "",
      account: 0,
      peismax: 0,
      dealpassword:""
    };
  },
  created() {
    this.$axios.post("/index/asset/getb").then(res => {
      this.peis = res.data.info;
      this.moneyarr = res.data.info.tbtype;
    });
  },
  methods: {
    alll() {
      this.number = this.peismax;
    },
    mongad() {
      this.$axios
        .post("/index/asset/crubalance", {
          btype: 1,
          ftype: this.value
        })
        .then(res => {
          this.peismax = res.data.info;
        });
    },
    pushs() {
      console.log(this.value, this.number, this.address);
      if (!this.value && !this.number && !this.address) {
        this.$createToast({
          txt: "请填写完整",
          type: "txt",
          time: 1000
        }).show();
        return;
      }
      this.$axios
        .post("/index/asset/tb", {
          ftype: this.value,
          number: this.number,
          address: this.address,
          trad_password: this.dealpassword,
        })
        .then(res => {
          console.log(res.data, ".....数据");
          this.$createToast({
            txt: res.data.msg,
            type: "txt",
            time: 1200
          }).show();
          if (res.data.code == 0) {
            setTimeout(() => {
              this.$router.back(-1);
            }, 1200);
          }
        });
    }
  },
  watch: {
    number(s) {
      var sd = Number(s) - Number(this.peis.fee);
      sd > 0 ? (this.account = sd) : (this.account = 0);
    },
    value() {
      this.mongad();
    }
  }
};
</script>


<style lang="less" scoped>
.header-warpper {
  padding: 0 0.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 1.333333rem;
  color: #000;
}
.header-warpper img {
  width: 0.213333rem;
  height: 0.373333rem;
  position: relative;
  top: -0.06rem;
}
.header-warpper span {
  font-size: 0.48rem;
  padding-left: 0.2rem;
}
p {
  text-align: start;
}
.tb {
  width: 95%;
  margin: auto;
}
.tb01 {
  font-size: 0.4rem;
  font-weight: bold;
  color: #333;
  margin-top: 0.3rem;
}
.tb02,
.el-select {
  width: 100%;
  height: 1.1rem;
  background: #f7f7f7;
  border-radius: 0;
  overflow: hidden;
  margin-top: 0.3rem;
}
.el-select {
  margin-top: 0;
}
.tb02 p,
.tb02 select,
.tb02 img {
  float: left;
}
.tb02 p {
  font-size: 0.4rem;
  color: #333;
  line-height: 1rem;
  margin-left: 0.3rem;
}
.tb02 select {
  height: 1rem;
  margin-left: 5.5rem;
  background: #f7f7f7;
  border: 0;
}
.tb02 select option {
  font-size: 0.4rem;
  line-height: 1rem;
  color: #999;
}
.tb02 img {
  width: 0.4rem;
  display: block;
  float: right;
  margin-right: 0.3rem;
  margin-top: 0.3rem;
}
.tbdz {
  width: 95%;
  margin: auto;
  margin-top: 0.3rem;
}
.tbdz01 {
  height: 1rem;
  font-size: 0.35rem;
  color: #333;
  line-height: 1rem;
}
.tbdz02 {
  width: 100%;
  height: 1rem;
  overflow: hidden;
  border-bottom: 1px solid #dcdcdc;
}
.tbdz02_lt,
.tbdz02_rt {
  float: left;
}
.tbdz02_lt {
  width: 80%;
  height: 1rem;
  text-align: left;
}
.tbdz02_lt input {
  font-size: 0.35rem;
  line-height: 1rem;
  color: #999;
  background: #fff;
  border: 0;
}
.tbdz02_rt {
  width: 20%;
  overflow: hidden;
}
.tbdz02_rt_z,
.tbdz02_rt_y {
  float: left;
}
.tbdz02_rt img {
  width: 0.5rem;
  display: block;
  margin-top: 0.25rem;
}
.tbdz02_rt_y {
  float: right;
}
.tbdz02_rt_z p {
  font-size: 0.35rem;
  color: #999;
  line-height: 1rem;
}
.tbdz02_rt_y p {
  font-size: 0.35rem;
  color: #333;
  line-height: 1rem;
}
.tbdz03 {
  font-size: 0.35rem;
  color: #999;
  line-height: 0.6rem;
}
.tbdz02_lt p {
  font-size: 0.35rem;
  color: #333;
  line-height: 1rem;
}
.dzsl {
  width: 95%;
  height: 1rem;
  margin: auto;
  margin-top: 0.5rem;
  overflow: hidden;
}
.dzsl_lt,
.dzsl_rt {
  float: left;
}
.dzsl_lt {
  font-size: 0.4rem;
  color: #666;
  line-height: 1rem;
}
.dzsl_rt {
  float: right;
  font-size: 0.4rem;
  color: #333;
  line-height: 1rem;
}
.tban {
  width: 95%;
  margin: auto;
  margin-top: 1rem;
  height: 1rem;
}
.tban input {
  width: 100%;
  background: #18c78d;
  font-size: 0.4rem;
  color: #fff;
  line-height: 1rem;
  border: 0;
}
.wxts {
  width: 95%;
  margin: auto;
  margin-top: 0.3rem;
}
.wxts p {
  font-size: 0.35rem;
  color: #333;
  line-height: 0.6rem;
}
.wxts .wxts01 {
  color: red;
}
.ddxx_rt {
  color: #03be87;
  border: 1px solid #03be87;
  padding: 0.1rem;
  position: absolute;
  right: 0.4rem;
  border-radius: 3px;
  font-size: 0.4rem;
}
.header-warpper {
  position: relative;
}
</style>
